<template>
	<view class="container" style="padding: 0;">
		<!-- 顶部导航 -->
		<!-- <view class="header">
			<view class="back-btn" @click="onBack">
				<text class="back-icon">←</text>
			</view>
			<view class="title">用户协议与隐私政策</view>
		</view> -->

		<!-- 内容区域 -->
		<view class="content">
			<scroll-view class="agreement-scroll" scroll-y>
				<view class="article-content" v-html="article.article_content"></view>
			</scroll-view>
		</view>

		<!-- 底部操作区 -->
		<view class="footer">
			<view class="agreement-check">
				<view class="checkbox" :class="{ checked: isAgreed }" @click="isAgreed = !isAgreed">
					<text class="check-icon" v-if="isAgreed">✓</text>
				</view>
				<text class="check-text">我已阅读</text>
			</view>

			<button class="next-btn" :class="{ active: isAgreed }" :disabled="!isAgreed" @click="onNext">
				同意升级会员
			</button>
		</view>
	</view>
</template>

<script>
	import utils from '@/common/utils.js';
	import AppShare from '@/components/app-share.vue';
	export default {
		data() {
			return {
				isAgreed: false, // 是否同意协议
				/*文章详情*/
				article: {
					image: {}
				},
				article_id:10005,
			};
		},
		mounted() {
			/*获取产品详情*/
			this.getData();
		},
		methods: {
			/*获取文章详情*/
			getData() {
				let self = this;
				uni.showLoading({
					title: '加载中'
				});
				self.loading = true;
				let article_id = self.article_id;
				self._get(
					'plus.article.article/detail',
					{
						article_id: article_id,
						url: self.urldata
					},
					function(res) {
						/*详情内容格式化*/
						res.data.detail.article_content = utils.format_content(res.data.detail.article_content);
						console.log(res.data.detail.article_content);
						self.article = res.data.detail;
						// 配置微信分享参数
						//#ifdef H5
						if (self.url != '' && self.isWeixin()) {
							let params = {
								article_id: self.article_id
							};
							self.configWx(res.data.share.signPackage, res.data.share.shareParams, params);
						}
						//#endif
						self.loadding = true;
						uni.hideLoading();
					}
				);
			},
			// 返回上一页
			onBack() {
				uni.navigateBack();
			},
			// 下一步操作
			onNext() {
				let self = this;
				// 这里可以根据实际需求跳转至相应页面
				uni.showToast({
					title: '您已经阅读，即将进入下一步',
					icon: 'none',
					duration: 2000
				});
				self._get('user.user/is_rq_member', {}, function(data) {
					// 示例：2秒后跳转到首页
					setTimeout(() => {
						uni.switchTab({
						    url: '/pages/index/index'
						});
					}, 1000);
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部导航 */
	.header {
		display: flex;
		align-items: center;
		height: 44px;
		padding: 0 16px;
		background-color: #ffffff;
		border-bottom: 1px solid #eee;
	}

	.back-btn {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		font-size: 20px;
		color: #333;
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 18px;
		font-weight: 500;
		color: #333;
	}

	/* 内容区域 */
	.content {
		flex: 1;
		padding: 16px;
		box-sizing: border-box;
	}

	.agreement-scroll {
		height: 100%;
		background-color: #ffffff;
		border-radius: 8px;
		padding: 16px;
		box-sizing: border-box;
	}

	.agreement-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		margin-bottom: 12px;
	}

	.agreement-text {
		font-size: 14px;
		color: #666;
		line-height: 1.6;
		margin-bottom: 24px;
	}

	/* 底部操作区 */
	.footer {
		padding: 16px;
		background-color: #ffffff;
		border-top: 1px solid #eee;
	}

	.agreement-check {
		display: flex;
		align-items: center;
		margin-bottom: 16px;
	}

	.checkbox {
		width: 20px;
		height: 20px;
		border: 2px solid #ccc;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 8px;
		transition: all 0.3s ease;
	}

	.checkbox.checked {
		background-color: #007aff;
		border-color: #007aff;
	}

	.check-icon {
		color: white;
		font-size: 14px;
	}

	.check-text {
		font-size: 14px;
		color: #666;
		line-height: 1.4;
	}

	.next-btn {
		width: 100%;
		height: 48px;
		line-height: 48px;
		border-radius: 24px;
		background-color: #ccc;
		color: #fff;
		font-size: 16px;
		border: none;
		opacity: 0.7;
		transition: all 0.3s ease;
	}

	.next-btn.active {
		background-color: #007aff;
		opacity: 1;
	}

	.next-btn::after {
		border: none;
	}
</style>